<template>
	<view v-if="info" class="content">
		<!-- 轮播 -->
		<swiper :circular="true" v-if="info.carousel && info.carousel.length" class="swiper" indicator-dots
			:autoplay="autoplay">
			<swiper-item v-for="item in info.carousel" :key="item.id">
				<u-image @click="previewImage(item)" v-if="item.type === 1" height="252px" :src="item.attachment">
				</u-image>
				<video v-else @play="autoplay = false" @ended="autoplay = true" :src="item.attachment"></video>
			</swiper-item>
		</swiper>

		<view class="border-b bg-white u-p-t-28 u-p-r-28 u-p-b-20 u-p-l-28">
			<view class="u-flex u-row-between">
				<text class="title u-flex-1 u-font-16 color-3 u-line-1">{{info.pet_nickname}}</text>
				<view @click="showShareModal = true" class="u-flex">
					<image style="width:20px;height: 20px;" src="@/static/index/share.png"></image>
					<text class="u-font-14 color-80 u-m-l-12">
						转发
					</text>
				</view>
			</view>

			<view class="u-m-t-16 u-font-12 color-6">
				{{info.age}} {{info.sex}} {{info.feature_text}}
			</view>

			<view class="u-m-t-14 u-m-b-20">
				<u-tag class="u-m-r-20" color="#333" :text="info.sterilize" bg-color="#FEF2BF" mode="dark" />
				<u-tag class="u-m-r-20" color="#333" :text="info.expelling_parasite" bg-color="#FEF2BF" mode="dark" />
				<u-tag class="u-m-r-20" color="#333" :text="info.vaccine" bg-color="#FEF2BF" mode="dark" />
				<u-tag class="u-m-r-20" color="#333" :text="info.body" bg-color="#FEF2BF" mode="dark" />
				<u-tag class="u-m-r-20" color="#333" :text="info.hair" bg-color="#FEF2BF" mode="dark" />
			</view>

			<view @click="chooseLocation" class="location u-font-12 u-flex u-row-between">
				<view class="u-flex">
					<u-image class='u-m-r-12' width="14px" height="14px" src="@/pagesIndex/static/location_light.png">
					</u-image>
					<text>{{info.location}}</text>
				</view>
				<view class="u-flex">
					<u-image class='u-m-r-12' width="60px" height="20px" src="@/pagesIndex/static/look.png">
					</u-image>
				</view>
			</view>

			<view class="u-flex u-m-t-20 u-row-between u-font-12 color-80">
				<text>{{info.create_time}}</text>
				<view class="">
					<text>{{info.page_view}}查看</text>
					<text class="u-m-l-12">{{info.transmit_num}}转发</text>
				</view>
			</view>

		</view>

		<!-- 故事 -->
		<view class="bg-white u-p-l-28 u-p-r-28 u-p-b-20">
			<view class="border-title u-p-t-16 u-p-b-16">
				Ta的故事
			</view>
			<view class="u-font-14 u-p-l-20 color-6">
				{{info.story}}
			</view>



			<view class="border-title u-p-t-16 u-p-b-16">
				领养条件
			</view>

			<view class="u-p-l-20" v-if="info.adopt_requirements_list && info.adopt_requirements_list.length">
				<view style="align-items: flex-start;" class="u-font-14 color-3 u-flex u-m-b-8"
					v-for="(item,index) in info.adopt_requirements_list" :key="index">
					<image class="u-m-t-6" style="width:14px;height:14px" src="@/pagesIndex/static/checkbox.png"></image>
					<view class="u-m-l-28 max-width">{{item}}</view>
				</view>
			</view>


			<view class="border-title u-p-t-22 u-p-b-14">
				有偿无偿
			</view>
			<view class="u-font-14 color-80 u-p-l-20">
				<text v-if="info.pay_or_free === 1">免费领养</text>

				<text v-if="info.pay_or_free === 2">红包</text>
				<text v-if="info.pay_or_free === 2">{{info.red_fee}}</text>

				<text v-if="info.pay_or_free === 3">押金</text>
				<text v-if="info.pay_or_free === 3">{{info.deposit}}</text>

				<view v-if="info.pay_or_free === 3">退还条件：{{info.refund_condition}}</view>
			</view>


		</view>

		<!-- 发布者 -->
		<publisher :user="info.user" :info="info" report @onReport="goBlackListAdd"></publisher>

		<view class="u-p-t-20">
			<view class="u-p-28 bg-white">
				<view class="border-title u-font-16 color-3">
					已申请领养的人数({{info.applys.length}})
				</view>

				<u-read-more close-text="展开" toggle color="#808080" show-height="300">
					<view class="u-flex u-m-t-14 u-p-b-14 u-flex-wrap">
						<image v-for="(item,index) in info.applys" :key="index" class="u-m-10 more-img"
							:src="item.user.avatar">
						</image>
					</view>
				</u-read-more>
			</view>
		</view>

		<!-- 留言 -->
		<!-- type = 1领养评论 2寻宠评论 3寻主评论 4社区帖子 -->
		<comment-list ref="commentList" :type="1" :oid="id" @refresh="getInfo">
		</comment-list>

		<!-- 返回顶部 -->
		<u-back-top :duration="1000" :scroll-top="scrollTop"></u-back-top>


		<!-- 分享弹框 -->
		<u-mask :show="showShareModal" @click="showShareModal = false">
			<view class="share-warp">
				<view class="rect" @tap.stop>
					<view class="title">
						转发扩散，帮Ta更快找家！
					</view>
					<view class="u-flex u-row-around u-p-t-36">
						<view class="item">
							<button class="btn" open-type="share">
								<u-image width="36px" height="36px" src="@/static/index/share_wechat.png"></u-image>
								<text class="u-m-t-12 u-font-12 color-3">微信好友</text>
							</button>
						</view>
						<view @click="handlePoster" class="item">
							<button class="btn">
								<u-image width="36px" height="36px" src="@/pagesIndex/static/share_friend.png"></u-image>
								<text class="u-m-t-12 u-font-12 color-3">朋友圈</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 海报 -->
		<u-action-sheet :list="list" @click="changePoster" v-model="showActionSheet"></u-action-sheet>

		<u-mask :mask-click-able="false" :show="showPosterModal">
			<view class="poster-warp">
				<u-image :src="posterImg" width="347px" height="550px"></u-image>

				<canvas class="poster1" canvas-id="poster1"
					:style="{width: poster1.width + 'px', height: poster1.height + 'px'}"></canvas>
				<canvas class="poster2" canvas-id="poster2"
					:style="{width: poster2.width + 'px', height: poster2.height + 'px'}"></canvas>
				<view class="btns">
					<view @click="showPosterModal = false">
						关闭
					</view>
					<view @click="saveCanvas">
						保存
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 底部操作 -->
		<view class="action u-flex">
			<view class="u-flex-1 u-flex u-p-r-40">
				<view @click="goComment" class="u-font-12 color-3 u-m-l-50">
					<u-image width="22px" height="22px" src="@/static/index/comment.png">
					</u-image>
					<view class="u-m-t-8">留言</view>
				</view>
				<view @click="handlePoster" class="u-font-12 color-3" style="margin-left: 47px;">
					<u-image width="22px" height="22px" src="@/static/index/like.png">
					</u-image>
					<view class="u-m-t-8">海报</view>
				</view>
			</view>
			<view class="u-flex-1 u-p-r-28">
				<view @click="goApplyforAdopt" class="share-btn">
					申请领养
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import {
		getAdoptsDetail,
		transmitAdd
	} from '@/api/index';
	import {
		getwxacodeunlimit
	} from '@/api/common';


	import publisher from '@/components/publisher/publisher.vue';
	import commentList from '@/pagesIndex/components/commentList/commentList.vue';
	import drawPoster from '@/drawPoster';
	export default {
		components: {
			publisher,
			commentList
		},
		data() {
			return {
				id: '',
				info: null,
				showShareModal: false,
				scrollTop: 0,
				autoplay: true,
				showPosterModal: false,
				poster1: {},
				poster2: {},
				posterImg: '',
				posterIndex: 0,
				showActionSheet: false,
				list: [{
						text: '海报一'
					},
					{
						text: '海报二'
					}
				],
				codeUrl: '',

			};
		},
		onLoad(options) {
			this.id = options.id;
			if (options.scene) { // 分享的海报里面的小程序码会携带id;
				this.id = options.scene;
				this.getInfo();
			}
		},
		onShow() {
			if (this.$refs.commentList) {
				this.$refs.commentList.getList();
			}
			this.getCodeUrl();
			this.getInfo();
		},
		onShareAppMessage() {
			this.transmitAdd();
			const imageUrl = this.info.carousel.filter(item => item.type === 1)[0].attachment;
			return {
				title: this.info.title,
				path: '/pagesIndex/indexInfo/indexInfo?id=' + this.id,
				imageUrl
			}
		},
		onShareTimeline() {
			const imageUrl = this.info.carousel.filter(item => item.type === 1)[0].attachment;
			return {
				title: this.info.title,
				imageUrl
			}
		},
		methods: {
			previewImage(item) {
				const urls = this.info.carousel.map(item => item.attachment);
				uni.previewImage({
					current: item.attachment,
					urls
				})
			},
			async transmitAdd() {
				// 1领养 2寻宠 3寻主 4社区帖子
				await transmitAdd({
					type: 1,
					oid: this.id,
				});
			},
			async getInfo() {
				const res = await getAdoptsDetail({
					id: this.id
				});
				this.info = res.data;
			},
			async getCodeUrl() {
				const res = await getwxacodeunlimit({
					page: 'pagesIndex/indexInfo/indexInfo',
					scene: this.id
				});
				this.codeUrl = res.data;
			},

			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			chooseLocation() {
				uni.openLocation({
					type: 'gcj02',
					latitude: Number(this.info.lat),
					longitude: Number(this.info.lng),
					address: this.info.location,
					name: this.info.city + this.info.district,
				})
			},
			goBlackListAdd() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					if (this.info.is_mine === 1) {
						return uni.showToast({
							title: '不能举报自己',
							icon: "none",
							mask: true,
						});
					}
					uni.navigateTo({
						url: `/pagesIndex/blackListAdd/blackListAdd?source=1&oid=${this.info.id}&sxr_id=${this.info.user_id}`
					})
				}
			},
			goApplyforAdopt() {

				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					// 自己发布的不能申请
					if (this.info.is_mine === 1) {
						return uni.showToast({
							title: '不能申请自己发布的',
							icon: "none",
							mask: true,
						});

					} else {
						if (this.info.my_apply_id > 0) {
							return uni.showToast({
								title: '您已经申请过了',
								icon: "none",
								mask: true,
							});
						} else {
							uni.navigateTo({
								url: "/pagesIndex/applyforAdopt/applyforAdopt?id=" + this.id
							})
						}
					}
				}
			},

			goComment() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					// 1领养 2寻宠 3寻主 4社区帖子
					uni.navigateTo({
						url: `/pagesIndex/comment/comment?type=1&oid=${this.id}&parent_id=0`
					})
				}

			},
			handlePoster() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);

				} else {
					this.showActionSheet = true;
					this.showShareModal = false;
				}
			},
			async changePoster(idx) {
				this.posterIndex = idx;
				uni.showLoading({
					title: '海报绘制中',
					mask: true,
				})
				let res = null;
				if (this.info.carousel && this.info.carousel.length) {
					const images = this.info.carousel.filter(item => item.type === 1);
					if (images.length) {
						res = await drawPoster.drawGetInfo1(this, 'poster1', this.codeUrl, images[0].attachment);
						if (idx === 1) {
							res = await drawPoster.drawGetInfo2(this, 'poster2', this.codeUrl, images[0].attachment);
						}
					}
				}
				if (res.poster && res.poster.tempFilePath) {
					this.posterImg = res.poster.tempFilePath;
					uni.hideLoading();
					this.showPosterModal = true;
				} else {
					uni.showToast({
						title: '海报绘制失败',
						icon: "none",
					})
				}
			},
			saveCanvas() {
				drawPoster.saveImg(this, this.posterImg)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 70px;
	}

	.swiper {
		height: 252px;

		video {
			width: 100%;
			height: 252px;
		}
	}

	.action {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 1;
		background-color: #fff;
		padding: 9px 0;
		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.03);
		border-radius: 10px 10px 0px 0px;
	}

	.share-btn {
		width: 183px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #FFCF0B;
		border-radius: 20px;
		font-size: 16px;
		color: #333;
	}

	.location {
		height: 34px;
		background: #FEF2BF;
		border-radius: 4px;
		border-radius: 4px;
		padding: 0 10px;
		color: #000;
	}

	// 分享弹框
	.share-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			width: 500rpx;
			background-color: #fff;
			border-radius: 6px;
			padding: 17px 41px 24px;

			.title {
				padding: 14rpx 20rpx;
				background-color: #F8F8F8;
				border-radius: 4px;
				color: #F34184;
				font-size: 12px;
				text-align: center;
			}

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn {
					background: #fff;
					padding: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					&::after {
						border: 0;
					}
				}
			}
		}
	}

	.more-img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.poster1 {
		position: absolute;
		top: -9999px;
		left: -9999px;
		width: 347px;
		height: 550px;
	}

	.poster2 {
		width: 347px;
		height: 550px;
		position: absolute;
		bottom: -9999px;
		right: -9999px;
		z-index: 9999;
	}

	.max-width {
		width: 620rpx;
	}
</style>
